﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <title>MCSS语音客服</title>
    <script type="text/javascript" src="../../js/frame/browser.js"></script>
    <style>

        ::-webkit-scrollbar {
            display: none
        }

    </style>
    <script type="text/javascript">
        Browser.css('../../css/main.css')
    </script>

    <style type="text/css">
        .intentStrong {
            display: block;
            text-align: center;
        }

        .intentButton {
            margin-top: 20px;
            width: 150px;
            height: 60px;
            font-size: 1em;
            background: #F90;
            color: #FFF;
            border: none;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .pt-page-rotateSidesOut {
            transform-origin: -50% 50%;
            animation: rotateSidesOut .5s both ease-in;
        }

        .pt-page-rotateSidesIn {
            transform-origin: 150% 50%;
            animation: rotateSidesIn .5s both ease-out;
        }

        @keyframes rotateSidesOut {
            to {
                opacity: 0;
                transform: translateZ(-500px) rotateY(90deg);
            }
        }

        @keyframes rotateSidesIn {
            from {
                opacity: 0;
                transform: translateZ(-500px) rotateY(-90deg);
            }
        }

        .pt-page-delay200 {
            animation-delay: .2s;
        }

        .pt-page {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            visibility: hidden;
            overflow: hidden;
            backface-visibility: hidden;
            transform: translate3d(0, 0, 0);
            transform-style: preserve-3d;
        }

        .pt-page-current {
            visibility: visible;
            z-index: 1;
        }

        .pt-perspective {
            /*position: relative;*/
            width: 1920px;
            height: 1080px;
            perspective: 1200px;
        }
    </style>

</head>

<body>
<div class="pt-perspective">
    <div id="wrapper" class="pt-page-current pt-page">
        <div class="container">
            <div class="mainwrap">
                <div class="msglist" id="msglist">
                </div>

                <script id="msgItem" type="text/x-handlebars-template">
                    {{#each msgList}}
                    <div class="msgwrap {{#if cus}}customer{{/if}}" {{#if  hidden}} style="display:none" id="div{{spanId}}" {{/if }}>
                    <div class="dialog">
                        <div class="msgtext" {{#if spanId}} id="{{spanId}}" {{/if}}>
                        {{{text}}}
                        {{#if next}}
                        <strong class="intentStrong">
                            {{#each next}}
                            <button class="intentButton" next="{{json this}}" onclick="preDoIntent(this);">{{buttonName}}</button>
                            {{/each}}
                        </strong>
                        {{/if}}
                        {{#if route}}
                        {{{route}}}
                        {{/if}}
                    </div>
                    </div>
                    <div class="headicon {{#if cus}}customer{{else}}system{{/if}}">
                        <img
                                src="../../images/{{#if cus}}me{{else}}logoszt{{/if}}.png"
                                width="{{#if cus}}72{{else}}60{{/if}}" height="{{#if cus}}72{{else}}60{{/if}}" alt="">
                    </div>
                    </div>
                    {{/each}}
                </script>
            </div>

            <div class="side">
                <div class="sidebg" style="width: 640px;height: 487px">
                    <img src="../../images/sideimg.png" style="width: 480px;height: auto;top: 20px;left: 80px;">
                </div>
                <div class="sidecon">
                    <h3 class="sidetit">常见问题快捷入口</h3>
                    <ul class="shortcut" id="biztypes">
                        <li biztype="sm_33">
                            <div class="quickicon_xsk"></div>
                            <p>办理学生卡</p>
                        </li>
                        <li biztype="sm_00">
                            <div class="quickicon_cz"></div>
                            <p>充值</p>
                        </li>
                        <li biztype="sm_32">
                            <div class="quickicon_fp"></div>
                            <p>打印发票</p>
                        </li>
                        <li biztype="10">
                            <div class="quickicon_sk"></div>
                            <p>购卡</p>
                        </li>
                        <li biztype="tk">
                            <div class="quickicon_tk"></div>
                            <p>退卡</p>
                        </li>
                        <li biztype="sm_34">
                            <div class="quickicon_kf"></div>
                            <p>联系客服</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--<div id="options" class="options"
                 style="left:0;top:0;position:fixed!important;	position:absolute;display: none;z-index:1;"
                 onclick="switchQuestionList()">
                <h3>你可以这样问我：</h3>
                <ul class="option">
                    <li class="op_xsk">
                        <h4 class="optitle">办理学生卡</h4>
                        <p class="opwords">“我要办理学生卡”</p>
                    </li>
                    <li class="op_cz">
                        <h4 class="optitle">充值</h4>
                        <p class="opwords">“我要充值”</p>
                    </li>
                    <li class="op_fp">
                        <h4 class="optitle">打印发票</h4>
                        <p class="opwords">“我要打印电子发票”</p>
                    </li>
                    <li class="op_sk">
                        <h4 class="optitle">购卡</h4>
                        <p class="opwords">“我要买卡”</p>
                    </li>
                    <li class="op_tk">
                        <h4 class="optitle">退卡</h4>
                        <p class="opwords">“我要退卡”</p>
                    </li>
                    <li class="op_kf">
                        <h4 class="optitle">联系客服</h4>
                        <p class="opwords">“我要联系客服”</p>
                    </li>
                </ul>
            </div>-->
            <div id="siri"
                 style="width: 1280px; height: 240px; background: #fff;left:0;	bottom:-40px;position:fixed!important;	position:absolute;">
                <span id="siriTip" style="left:600px;position:fixed!important;	position:relative;display: none">请说话</span>
            </div>
        </div>
    </div>
    <div id="screen" class="pt-page" style=" background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#7ab7f8), to(#d9e7f8));width: 100%;	height: 100%;	left:0;	top:0;	position:fixed!important;position:absolute;vertical-align:middle;">
        <img src="../../images/screen_protect.png" style="display: block;margin: auto;">
    </div>
</div>
</body>
<script src="../../js/biz/_main_js.js"></script>
<script src="../../js/biz/_main.js"></script>
</html>
